<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	template="/pages/templates/template.xhtml">
	<ui:define name="metadata">
	</ui:define>
	<ui:define name="content">
		<h:form id="formAlocacao">
			<div>
				<div class="div-titulo-tela">
					<p:outputLabel styleClass="titulo-tela">Editar/Conferir Alocação</p:outputLabel>
					<br /> <br />
					<p:separator></p:separator>
					<div class="div-titulo-botoes">
						<p:commandButton value="Salvar" update="formAlocacao" global="true"
							action="#{AlocacaoEditarBean.doAlocar}" />
						<p:commandButton value="Finalizar" update="formAlocacao" global="true"
							action="#{AlocacaoEditarBean.doFinalizar}" />

						<p:ajaxStatus style="width:16px;height:16px;" id="ajaxStatusPanel">
							<f:facet name="start">
								<h:graphicImage value="../images/waiting.gif" />
							</f:facet>
						</p:ajaxStatus>
					</div>
				</div>
				<div>
					<div class="div-corpo-tela">
						<div class="div-mensagem">
							<p:messages id="messages" autoUpdate="true" closable="true" />
						</div>

						<p:outputPanel>
							<!-- LISTA DE GRUPOS DE TRABALHO DISPONIVEIS -->

							<p:dataTable id="dtGrupos" var="grupo" emptyMessage=""
								style="width:40%; float:left; position:relative;"
								value="#{AlocacaoEditarBean.gruposNaoAlocados}"
								rowKey="#{grupo.id}" 
								selection="#{AlocacaoEditarBean.grupoSelecionado}"
								selectionMode="single" paginator="true" rows="10">

								<p:ajax event="rowSelect" global="false"
									listener="#{AlocacaoEditarBean.onGrupoRowSelect}" />

								<p:ajax event="rowToggle" global="false"
									listener="#{AlocacaoEditarBean.onRowToggle}" />

								<p:column style="width:2%" >
									<p:rowToggler  />
								</p:column>

								<p:column headerText="Alunos">
									<h:outputText value="#{grupo.alunos}" />
								</p:column>

								<p:rowExpansion>
									<p:panel id="infoGrupo" header="Grupo de Trabalho"
										style="width:90%;">
										<p:panel header="Coeficiente do Grupo">
											<p:outputLabel>#{grupo.coeficienteRendimento}</p:outputLabel>
										</p:panel>

										<p:dataTable var="aluno" emptyMessage=""
											value="#{grupo.integrantes}">
											<p:column headerText="Grupos">
												<h:outputText value="#{aluno.nome}" />
											</p:column>
										</p:dataTable>

										<p:dataTable var="area" emptyMessage="" value="#{grupo.areas}">
											<p:column
												headerText="Areas de Interesse (ordem de preferência)">
												<h:outputText value="#{area.nome}" />
											</p:column>
										</p:dataTable>

										<p:dataTable var="prof" emptyMessage=""
											value="#{grupo.professoresDesejados}">
											<p:column headerText="Professores (ordem de preferência)">
												<h:outputText value="#{prof.nome}" />
											</p:column>
										</p:dataTable>
									</p:panel>
								</p:rowExpansion>
							</p:dataTable>

							<p:outputPanel
								style="width:19%; float:left; position:relative; text-align: center; border: opx solid black;">
								<p:commandButton value="Associar" global="false"
									update="dropArea dtGrupos dtProfessores"
									action="#{AlocacaoEditarBean.associar}" />
							</p:outputPanel>

							<!-- LISTA DE PROFESSORES DISPONIVEIS -->

							<p:dataTable id="dtProfessores" var="prof" emptyMessage=""
								style="width:40%; float:right; position:relative;"
								paginator="true" rows="10"
								value="#{AlocacaoEditarBean.professores}"
								rowKey="#{prof.matricula}"
								selection="#{AlocacaoEditarBean.professorSelecionado}"
								selectionMode="single">

								<p:ajax event="rowSelect" global="false"
									listener="#{AlocacaoEditarBean.onProfessorRowSelect}" />

								<p:ajax event="rowToggle" global="false"
									listener="#{AlocacaoEditarBean.onRowToggleProfessor}" />

								<p:column style="width:2%">
									<p:rowToggler />
								</p:column>

								<p:column headerText="Professores">
									<h:outputText value="#{prof.nome}" />
								</p:column>

								<p:rowExpansion>
									<p:panel id="infoProfessor" header="Professor"
										style="width:90%;">

										<p:panel header="Carga Horária / Horas Orientação">
											<p:outputLabel>#{prof.cargaHoraria} / #{prof.numHorasOrientacao}</p:outputLabel>
										</p:panel>
										<p:dataTable var="area" emptyMessage=""
											value="#{prof.areasInteresse}">
											<p:column
												headerText="Areas de Interesse (ordem de preferência)">
												<h:outputText value="#{area.nome}" />
											</p:column>
										</p:dataTable>
									</p:panel>
								</p:rowExpansion>
							</p:dataTable>
						</p:outputPanel>

						<br />
						<!-- LISTA DE ALOCAÇÕES REALIZADAS -->
						<p:outputPanel id="dropArea">


							<p:dataTable id="dtAlocacaoGrupo" var="grupo" emptyMessage=""
								value="#{AlocacaoEditarBean.grupos}">

								<p:column sortBy="#{grupo.alunos}" headerText="Alunos">
									<h:outputText value="#{grupo.alunos}" />
								</p:column>

								<p:column sortBy="#{grupo.nomeProfessor}" headerText="Professor">
									<h:outputText value="#{grupo.nomeProfessor}" />
								</p:column>

								<p:column style="width:4%">
									<p:commandButton id="btnRemover" icon="ui-icon-close"
										update="dtAlocacaoGrupo :formAlocacao:dtGrupos"
										title="Desfazer alocacao" global="false"
										actionListener="#{AlocacaoEditarBean.desfazerGrupo(grupo)}">
									</p:commandButton>
								</p:column>
							</p:dataTable>

						</p:outputPanel>
					</div>
				</div>
			</div>
		</h:form>

		<script type="text/javascript">
			function handleDrop(event, ui) {
                var droppedItem = ui.draggable;

                droppedItem.fadeOut('fast');
			}
		</script>
	</ui:define>
</ui:composition>

